<template>
  <div>
    <table>
      <tr>
        <td class="one">用户名</td>
        <td>
          <input type="text" placeholder="用户名" v-model="use" />
        </td>
      </tr>
      <tr>
        <td class="one">密码</td>
        <td>
          <input type="password" placeholder="密码" v-model="pas" />
        </td>
      </tr>
      <span @click="back">x</span>
    </table>
    <button @click="fn">登录</button>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Postuser } from "../../https/http";
import { mapMutations } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      show: false,
      use: "",
      pas: "",
      str: ``,
    };
  },
  methods: {
    back() {
      this.chanGe2();
    },
    fn() {
      if (this.use == `` || this.pas == ``) {
        Toast.success("输入不能为空");
        return;
      }
      let obj = {
        username: this.use,
        pwd: this.pas,
      };
      Postuser(obj).then((res) => {
        if (res["errno"] == 0) {
          Toast.success("登陆成功");
        }
        // console.log("用户id", res.data.userInfo.id);
        // console.log("用户昵称", res.data.userInfo.nickname);
        // console.log("用户名", res.data.userInfo.username);
        // console.log("用户性别", res.data.userInfo.gender);
        // console.log("用户头像", res.data.userInfo.avatar);
        // console.log("token为", res.data.token);
        this.str = res.data.userInfo.avatar;
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("username", res.data.userInfo.username);
        console.log("响应数据", res);
        this.username();
        this.Cback();
        console.log(this.str);
        this.$emit("abc", this.str);
        this.chanGe2();
      });
    },
    ...mapMutations(["chanGe2", "username", "Cback"]),
  },
};
</script>

<style scoped lang="less">
div {
  position: absolute;
  width: 340px;
  height: 250px;
  background: white;
  z-index: 40;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  table {
    font-size: 18px;
    margin: 20px 0px 0px 6px;
    // background: darkcyan;
    td {
      height: 60px;
      input {
        width: 243px;
        margin-left: 20px;
        border-radius: 15px;
        height: 30px;
        border: 1px solid rgb(245, 235, 235);
        outline: none;
        box-sizing: border-box;
        padding-left: 20px;
        font-size: 12px;
      }
    }
    span {
      font-size: 25px;
      position: absolute;
      right: 15px;
      top: 15px;
    }
  }
  button {
    width: 70%;
    height: 30px;
    border-radius: 30px;
    background: red;
    color: white;
    margin: auto;
    display: block;
    margin-top: 20px;
    height: 42px;
  }
}
.one {
  padding-left: 5px;
}
</style>